<template>
  <FormView
    v-model="entity"
    form-max-width="1100px"
    :title="entity.id ? '验收管理' : '新建验收管理'"
    :toolbar-attrs="{
      buttons: [
        'back',
        {
          save: isDraft || flowContext.isStartNode,
          submit: hasBtn('submit'),
          withdraw: flowContext.canWithdraw,
          reject: flowContext.canReject,
          finish: hasBtn('finish')
        }
      ]
    }"
    :toolbar-listeners="{
      save: () => saveAndStart({ title: `${userName}的图书验收申请` }),
      submit: submitAudit,
      finish: () => submitAudit({}),
      withdraw: () => withdrawAudit(),
      reject: () => reject()
    }">
    <template #toolbar-right> </template>
    <FormHolder ref="form" label-width="110px" :disabled="isDisabled" :model="entity">
      <FormItemGroup block-title="基本信息">
        <FormInput v-model="entity.acceptNo" disabled prop="acceptNo" label="单号" />
        <FormDatePicker v-model="entity.acceptDate" prop="acceptDate" label="验收时间" required />
        <FormInputUser
          :id.sync="entity.accepterId"
          :name.sync="entity.accepter"
          prop="accepter"
          label="验收人"
          required
          max-length="255"
          @input="setUser" />
        <FormInput :value="entity.useUnitName" prop="useUnitName" label="使用单位" />
      </FormItemGroup>
      <FormItemGroup :enabled="flowContext.canReject" :gutter="0" block-title="入库清单">
        <FormTablePlus
          :key="entity.status"
          v-model="entity.books"
          required
          :handle-menus="['add', 'delete']"
          :toolbar-menus="!isDisabled ? ['delete'] : null"
          :bottom-add-button="!isDisabled || flowContext.canReject"
          label="书籍"
          :init-row="initRow"
          hide-label
          prefix-pick
          label-width="0"
          prop="books"
          :columns="columns">
          <template #bookCode="{ row, prop, required }">
            <FormInput v-model="row.bookCode" :required="required" :prop="prop" />
          </template>
          <template #name="{ row, prop, required }">
            <FormInput v-model="row.name" :required="required" :prop="prop" />
          </template>
          <template #author="{ row, prop, required }">
            <FormInput v-model="row.author" :required="required" :prop="prop" />
          </template>
          <template #publishDate="{ row, prop, required }">
            <FormDatePicker v-model="row.publishDate" :required="required" :prop="prop" />
          </template>
          <template #catalogCode="{ row, prop, required }">
            <FormInput
              v-model="row.catalogCode"
              readonly
              :required="required"
              :prop="prop"
              @click.native="pickerCategory(row)" />
          </template>
          <template #amount="{ row, prop, required }">
            <FormInputNumber v-model="row.amount" :required="required" :prop="prop" />
          </template>
        </FormTablePlus>
      </FormItemGroup>
    </FormHolder>
    <BookCategoryPicker :visible.sync="isPickerVisible" @confirm="onConfirm" />
  </FormView>
</template>

<script>
  import { save, create, load, update } from './api'
  import flowForm from '@/vue/mixin/flow-form'
  import BookCategoryPicker from '@/module/library/bookCategory/component/BookCategoryPicker.vue'

  export default {
    name: 'CheckAcceptForm',
    components: { BookCategoryPicker },
    docType: 'bookAccept',
    relativeViewId: 'CheckAcceptView',
    mixins: [flowForm],
    data() {
      return {
        isPickerVisible: false,
        row: null,
        entity: {
          id: null,
          acceptNo: null,
          accepterId: null,
          accepter: null,
          useUnitName: null,
          useUnitId: null,
          acceptDate: null,
          status: null,
          books: []
        }
      }
    },
    computed: {
      columns() {
        const columns = []
        columns.push(
          { prop: 'id', hide: true },
          { prop: 'catalogId', hide: true },
          { label: '图书编码', prop: 'bookCode', required: true },
          { label: '书籍名称', prop: 'name', required: true },
          { label: '作者', prop: 'author', required: true },
          { label: '出版时间', prop: 'publishDate', required: true },
          { label: '编录号', prop: 'catalogCode', required: true },
          { label: '数量', prop: 'amount', required: true }
        )
        return columns
      }
    },
    methods: {
      create,
      load,
      save,
      update,
      async initEntity(id) {
        const entity = await this.loadEntity(id)
        entity.books = entity.books || []
        this.entity = entity
      },
      initRow(row) {
        row.amount = 1
      },
      setUser(users) {
        const user = users[0]
        this.entity.useUnitId = user.deptId
        this.entity.useUnitName = user.deptName
      },
      pickerCategory(row) {
        this.row = row
        this.isPickerVisible = true
      },
      onConfirm(node) {
        this.row.catalogId = node.id
        this.row.catalogCode = node.fullName
        this.row = null
      }
    }
  }
</script>
